From c77c58e18143233be042c4980a6ed08ae9beac52 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 16 May 2022 19:40:23 +0200 Subject: chore: adjust and complete missing styles * add logo to topics pages and links * add Prism styles to articles * and a few other adjustements --- src/pages/article/[slug].tsx | 43 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 39 insertions(+), 4 deletions(-) (limited to 'src/pages/article/[slug].tsx') diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx index 5eeabd9..995e3a9 100644 --- a/src/pages/article/[slug].tsx +++ b/src/pages/article/[slug].tsx @@ -1,5 +1,6 @@ import ButtonLink from '@components/atoms/buttons/button-link'; import Link from '@components/atoms/links/link'; +import ResponsiveImage from '@components/molecules/images/responsive-image'; import Sharing from '@components/organisms/widgets/sharing'; import PageLayout, { type PageLayoutProps, @@ -9,15 +10,20 @@ import { getArticleBySlug, } from '@services/graphql/articles'; import { getPostComments } from '@services/graphql/comments'; +import styles from '@styles/pages/article.module.scss'; import { type Article, type Comment } from '@ts/types/app'; import { loadTranslation, type Messages } from '@utils/helpers/i18n'; +import useAddPrismClassAttr from '@utils/hooks/use-add-prism-class-attr'; import useBreadcrumb from '@utils/hooks/use-breadcrumb'; +import usePrismPlugins, { PrismPlugin } from '@utils/hooks/use-prism-plugins'; import useSettings from '@utils/hooks/use-settings'; import { GetStaticPaths, GetStaticProps, NextPage } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Script from 'next/script'; import { ParsedUrlQuery } from 'querystring'; +import { HTMLAttributes } from 'react'; +import { useIntl } from 'react-intl'; import { Blog, BlogPosting, Graph, WebPage } from 'schema-dts'; import useSWR from 'swr'; @@ -54,16 +60,31 @@ const ArticlePage: NextPage = ({ comments, post }) => { )), }; + const intl = useIntl(); + const footerMetaLabel = intl.formatMessage({ + defaultMessage: 'Read more articles about:', + description: 'ArticlePage: footer topics list label', + id: '50xc4o', + }); + const footerMeta: PageLayoutProps['footerMeta'] = { - topics: - topics && - topics.map((topic) => { + custom: topics && { + label: footerMetaLabel, + value: topics.map((topic) => { return ( - + + {topic.logo && ( + + )}{' '} {topic.name} ); }), + }, }; const { website } = useSettings(); @@ -156,6 +177,15 @@ const ArticlePage: NextPage = ({ comments, post }) => { }); }; + const prismPlugins: PrismPlugin[] = ['command-line', 'line-numbers']; + const { pluginsAttribute, pluginsClassName } = usePrismPlugins(prismPlugins); + useAddPrismClassAttr({ + attributes: { + 'data-filter-output': '#output#"', + }, + classNames: pluginsClassName, + }); + return ( <> @@ -173,6 +203,10 @@ const ArticlePage: NextPage = ({ comments, post }) => { /> ), + }} + bodyClassName={styles.body} breadcrumb={breadcrumbItems} breadcrumbSchema={breadcrumbSchema} comments={data && getCommentsList(data)} @@ -185,6 +219,7 @@ const ArticlePage: NextPage = ({ comments, post }) => { widgets={[